<template>
    <el-dialog v-model="dialogAddResource" title="添加资源" class="add_dialog"  width="30%"  :before-close="handleCloseResource">
      <el-upload
        class="upload-demo"
        :drag="true"
        ref='upload1'
         accept=".pdf,.doc,.docx,.ppt,.pptx,.mp4,.DOC,.DOCX,"
        :limit="5-props.fileListUnpload.length"
        :file-list="upFile"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        @change="handleFileChange"
        :auto-upload="false"
        multiple
      >
        <div class="uploadfile_shell">
          <div class="uploadfile_img"><img src="../assets/image/uploadfile.png" alt=""></div>

        </div>
        <div class="el-upload__text">
          点击或将文件拖拽到这里上传
        </div>
        <div class="el-upload__tip">
          支持扩展名：.pdf .doc .docx .ppt .pptx .mp4，最多上传{{5-props.fileListUnpload.length}}个文件，每个大小不超过5M
        </div>
  </el-upload>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="resetFormResource() " class="btn-cancel">取消</el-button>
      <el-button type="primary" @click="submitResource()">
        确定
      </el-button>
    </span> 
  </template>
  </el-dialog>

</template>

<script setup>
import { reactive, ref, defineProps, defineEmits, computed, getCurrentInstance, onMounted, watch } from 'vue';
import { addResource} from "@/utils/getData.js";
import { ElMessage,ElMessageBox} from 'jy-element-plus';
  const selectedFile= ref([])
  const upFile= ref([])
  const disabledUpload= ref(false)
  const isUpload= ref(true)
  const dialogAddResource=ref(false)
  const percentNow=ref(0)
  const percentTotal=ref(0)
  const upload1=ref()
  const emit = defineEmits(['isUpload'])
  const props = defineProps({
    id:String,
    fileListUnpload:Array
    
  }) 
  const handleFileChange = (event,fileList) => {
  disabledUpload.value=true
  const file = event.raw; //.raw
  const { name, size } = file;
  const m5 = size / 1024 / 1024;
  if (m5 > 5) {
    ElMessage.error("上传文件不能超过，5M");
    fileList.pop()
    return;
  }

  const is_type = name.indexOf(".pdf") != -1 || name.indexOf(".doc") != -1|| name.indexOf(".docx") != -1|| name.indexOf(".ppt") != -1|| name.indexOf(".pptx") != -1|| name.indexOf(".mp4") != -1;

  if (!is_type) {
    ElMessage.error("上传文件必须是，.pdf .doc .docx .ppt .pptx和.mp4格式的文件");
    fileList.pop()

    return;
  }
  selectedFile.value=[]
  for(let i of fileList){
    if(i.raw&& (i.name.indexOf(".pdf") != -1 || i.name.indexOf(".doc") != -1|| i.name.indexOf(".docx") != -1|| i.name.indexOf(".ppt") != -1|| i.name.indexOf(".pptx") != -1|| i.name.indexOf(".mp4") != -1)&&(i.size / 1024 / 1024 < 5)){
      selectedFile.value.push(i.raw)
      percentTotal.value = selectedFile.value.length
      percentNow.value=0

    }
  }
 

  
}
  const beforeRemove=(file,fileList)=>{
    selectedFile.value=selectedFile.value.filter(v=>file.raw.uid!=v.uid)
  }
  const handleExceed=(files, fileList)=>{
      ElMessage.warning("当前限制最多上传5个文件,已上传"+ props.fileListUnpload.length+'个文件')
    }
  const uploadAction=()=>{
      if(selectedFile.value.length>0){
        let D_data = new FormData()
        selectedFile.value.forEach(e=>{
          D_data.append("files",e);
        })
        D_data.append("courseId",props.id);
        D_data.append("periodType",JSON.parse(sessionStorage.getItem('LA_joniorMenus'))[0]?.periods[0]?.code)
        D_data.append("schCode",JSON.parse(sessionStorage.getItem('LA_joniorMenus'))[0]?.unitCode)
        addResource(D_data).then(data=>{
          dialogAddResource.value=false
          emit('isUpload',isUpload.value)
          selectedFile.value = [] //清空待传列表
          upFile.value =[]
          upload1.value.clearFiles()
        }).catch(error=>{
          ElMessage({
            type:'error',
            message: error.msg
          })
        })
      }
  }

  const handleCloseResource=()=>{
    dialogAddResource.value=false

  }
  const resetFormResource=()=>{
    dialogAddResource.value=false

  }
  const submitResource=()=>{
    if(selectedFile.value.length){
        uploadAction()

    }
  }

  const openDialogResource = () => {
    selectedFile.value = [] //清空待传列表
    upFile.value =[]
    setTimeout(()=>{
    dialogAddResource.value=true

    },200)

  };
defineExpose({ openDialogResource });
</script>

<style scoped lang='scss'>
 .upload-demo{
    // position: relative;
    ::v-deep .el-upload-dragger{
      background-color:#FBFBFB;
      margin:20px 60px;
    }
    
    ::v-deep .el-upload-list__item-name{
     
    }

    .uploadfile_shell{
       display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        margin-bottom:25px;
    }
    .uploadfile_img{
    
      width:60px;
      height:50px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .el-upload__text{
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      line-height: 14px;
    }
    .el-upload__tip{
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 14px;
    }
  }
  
  .add_dialog{
      .el-dialog__title {
          font-size:14px !important;
        }
        .el-input__inner{
          height:40px
        }
        .el-form-item__label{
          height: 40px;
          line-height: 40px;
          padding: 0 25px 0 0;
        }
        .add_dialog_select{
          .el-input__inner::placeholder {
          color: #333333;
          }
        }
      .dialog-footer{
        .el-button{
          width:90px;
          height: 35px;
        }
        
      }
      .el-button:hover.btn-cancel{
          background:none;
          border:1px solid #dcdfe6;
          color: #606266;

          // color: #fff;
          }
     
      }
</style>
<style lang='scss'>
.upload-demo{
  a:hover{
        text-decoration: none !important;
  }
}
  
</style>